<template>
  <div class="cl dk-upload">
    <div class="file_list z">
      <ul>
        <li v-for="(file, key) in fileList" :key="key" class="rounded-3 overflow-hidden">
          <div class="file flex items-center justify-center rounded-3 w-80px h-80px">
            <img v-if="file.type === 'image'" :src="file.url" alt="" />
            <dk-icon v-else-if="file.type === 'cert'" icon="mingcute:certificate-line" :size="48" />
            <i v-else class="el-icon-document" />
          </div>
          <div class="file-op items-center justify-center w-80px h-80px">
            <dk-icon icon="Delete" :size="24" @click="handleRemove(file, key)" />
          </div>
        </li>
      </ul>
    </div>
    <el-upload
      :action="actionUrl"
      multiple
      :limit="limit"
      :headers="headers"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :show-file-list="false"
      :on-success="handleSuccess"
      :data="data"
    >
      <div v-if="fileList.length < limit" class="upload_button z">
        <div class="file w-80px h-80px  flex items-center justify-center rounded-3">
          <dk-icon icon="Plus"></dk-icon>
        </div>
      </div>
    </el-upload>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getToken } from '@/utils/auth'

defineOptions({
  name: 'DkUpload'
})

const props = defineProps({
  limit: {
    default: 1,
    type: Number
  },
  modelValue: {
    default: () => [],
    type: [Object, Array]
  },
  type: {
    default: '',
    type: String
  },
  actionUrl: {
    default: import.meta.env.VITE_BASE_API + '/common/upload',
    type: String
  },
  data: {
    default: () => ({}),
    type: [Object]
  }
})

const emit = defineEmits(['update:modelValue'])

const headers = computed(() => ({
  'Access-Token': getToken()
}))

const fileList = ref(props.modelValue)

watch(
  fileList,
  (value) => {
    emit('update:modelValue', value)
  },
  { deep: true }
)

watch(
  () => props.modelValue,
  (newValue) => {
    fileList.value = newValue
  },
  { deep: true }
)

const handleSuccess = (response, file) => {
  if (response.code === 0) {
    const data = {
      name: file.name,
      type: props.type,
      url: response.data
    }
    fileList.value.push(data)
    emit('update:modelValue', fileList.value)
  } else {
    console.log(response)
  }
}

const handleExceed = (files, fileList) => {
  ElMessage.warning(
    `当前限制选择${props.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
  )
}

const handleRemove = (file, key) => {
  ElMessageBox.confirm(`确定移除 ${file.name}？`)
    .then(() => {
      fileList.value.splice(key, 1)
    })
    .catch(() => {
      // 用户取消删除操作
    })
}
</script>

<style scoped lang="scss">
.dk-upload {
  height: 80px;

  .file {
    border: 1px dashed #c0ccda;
    color: #999;
    text-align: center;
  }

  .file_list {
    li {
      float: left;
      margin-right: 10px;
      position: relative;
      .file {
        border: 1px solid #ccc;
      }
      .file-op {
        position: absolute;
        top: 0;
        width: 80px;
        height: 80px;
        background: #0000006e;
        text-align: center;
        color: #fff;
        line-height: 80px;
        display: none;
        cursor: pointer;
      }
      &:hover .file-op {
        display: block;
      }
    }
  }

  .upload_button .file {
    &:hover {
      border: 1px dashed #409eff;
    }
  }
}
</style>
